<template>
  <el-dialog title="搜索设置" top='0px' v-el-drag-dialog :visible.sync="conf.dialogVisible" :show-close="false"
    @open="handleOpen" :close-on-click-modal="false" width="625px">
    <el-transfer v-model="value" :titles="['待选字段', '选中字段']" :data="conf.columns">
    </el-transfer>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancle">取 消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import TableStore from '@/libs/util.store'
export default {
  name: 'yc-search-setting-panel',
  directives: { elDragDialog },
  props: {
    defaultValue: {
      type: Array
    },
    conf: {
      type: Object,
      default: function () {
        return {
          dialogVisible: false,
          columns: []
        }
      }
    },
    storage: {
      type: [Boolean, String],
      default: true,
      required: false
    }
  },
  watch: {
    defaultValue (val) {
      this.value = val
    }
  },
  data () {
    return {
      value: []
    }
  },
  created () {
    var val = this.getOptionsFromStorage()
    this.$emit('change', val)
  },
  methods: {
    handleCancle () {
      this.conf.dialogVisible = false
    },
    handleSubmit () {
      this.conf.dialogVisible = false
      this.$emit('change', this.value)
      this.saveOptionsToStorage(this.value)
    },
    handleOpen () {

    },
    saveOptionsToStorage (value) {
      if (this.storage === false) {
        return
      }
      this.getStorageTable().updateTableValue(value)
    },
    getOptionsFromStorage () {
      if (this.storage === false) {
        return
      }
      return this.getStorageTable().getTableValue()
    },
    clearThisStorage () {
      this.getStorageTable().clearTableValue()
    },
    getStorageTable () {
      if (this.StorageTableStore == null) {
        this.StorageTableStore = new TableStore({ $router: this.$route, tableName: 'searchColumns', keyType: this.storage })
      }
      return this.StorageTableStore
    },
    getColumnsHash (columns) {
      const keys = []
      for (const item of columns) {
        keys.push(item)
      }
      keys.sort()
      let hash = ''
      for (const key of keys) {
        hash += key
      }
      return hash
    }
  }
}
</script>
